<!--
 * @Author: 孙开源 && sunkaiyuan@namenode.cn
 * @Date: 2023-02-07 08:50:23
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-10-03 10:37:01
 * @Description: 
 * 
-->
<template>
  <!-- <el-tree-select :data="defaultList" filterable @change="change" :props="defaultProps" default-expand-all
    default-first-option :selectParams="{ 'default-first-option': true }" @filter-change="handleFilterChange"
    class="skSelectGroup"></el-tree-select> -->
  <el-select placeholder="请选择" @change="change" filterable default-first-option :filter-method="filterMethod">
    <selectGroupList :list="defaultList" :selectall="selectall" :lablefield="lablefield" :showfield="showfield" />
  </el-select>
</template>
<script>
import selectGroupList from "./list";

export default {
  name: "skSelectGroup",
  components: {
    selectGroupList
  },
  props: {
    list: {
      type: Object,
      default: () => { return null }
    },
    url: {
      type: Object,
      default: () => { return null }
    },
    showfield: {
      type: String,
      default: "name",
    },
    selectall: {
      type: Boolean,
      default: () => false
    },
    params: {
      type: Object,
      default: () => { return {} }
    },
    lablefield: {
      type: String,
      default: () => "name",
    },
  },
  data() {
    return {
      defaultList: [],
      data: [],
      defaultProps: {
        label: 'name',
        value: "id"
      }
    };
  },
  mounted() {
    this.getList();
  },
  watch: {
    list: {
      handler() {
        this.getList();
      },
      deep: true
    },

  },
  methods: {

    change(id) {
      let data = this.selectItem(id, this.defaultList)
      this.$emit("select", data);
    },
    selectItem(id, list = null) {
      let resdata = false, item = {};
      for (let key in list) {
        item = list[key];
        if (item.children) {
          resdata = this.selectItem(id, item.children);
          if (resdata != false)
            return resdata;
        }
        if (item.id == id) {
          return item
        }
      }
      return false;
    },
    filterMethod(val) {
      let cpList = this.$TOOL.objCopy(this.data);
      if ((val ?? "").trim() == "") {
        this.defaultList = cpList
      }
      else {
        this.defaultList = this.search(cpList, val);
      }
      return this.defaultList;
    },
    search(list, val) {
      val = val + "";
      return (list ?? []).map((v) => {
        let index = v[this.lablefield].indexOf(val);
        if (index >= 0) {
          return v;
        }
        if ((v.children?.length ?? 0) > 0) {
          v.children = this.search(v.children, val);
          if ((v.children ?? []).length > 0) {
            return v;
          }
        }
        return null;
      }).filter((v) => {
        return v != null;
      });
    },
    getList() {
      if (this.list) {
        this.data = this.defaultList = this.list;
      }
      else
        this.url.post(this.params).then((res) => {
          if (res.data.rows)
            this.data = this.defaultList = res.data.rows;
          else
            this.data = this.defaultList = res.data;
        });
    }
  }
};
</script>
<style>
.skSelectGroup .el-select-dropdown__item {
  padding: 0 10px 0 10px;
  padding-right: 10px;
  padding-left: 10px;
  text-align: left;
  height: 28px;
  line-height: 28px;
}

.skSelectGroup .expanded+li {
  font-weight: bold;
}
</style>